<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				height: 100px;
				width: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			#box2{
				height: 100px;
				width: 100px;
				background-color: yellow;
				position: absolute;
				left: 0;
				top: 200px;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn1">点击按钮后box1会向右移动</button>
		<button type="button" id="btn2">点击按钮后box1会向左移动</button>
		<button type="button" id="btn3">点击按钮后box2会向右移动</button>
		<button type="button" id="btn4">测试</button>
		<div id="box1"></div>
		<div id="box2"></div>
		<!-- <script type="text/javascript" src="tools.js"> -->
			
		</script>
		<script type="text/javascript">
			function getStyle(obj,name){
					if(getComputedStyle){
						return getComputedStyle(obj,null)[name];
					}else{
						return boj.currentStyle[name];
					}
				}
			var timer;
			var divbox1 = document.getElementById("box1");
			var divbox2 = document.getElementById("box2");
			var but1 = document.getElementById("btn1");
			var but2 = document.getElementById("btn2");
			var but3 = document.getElementById("btn3");
			var but4 = document.getElementById("btn4");
			but1.onclick = function(){
				// clearInterval(timer);
				// //开启一个定时器来实现动画效果
				// timer =  setInterval(function(){
					
				// 	//获取box1原来的left值
				// 	var oldvalue = parseInt(getStyle(box1,"left"));
				// 	// alert(getStyle(divbox1,"left"))
				// 	//修改
				// 	var newValue = oldvalue + 10 ;
					
				// 	if(newValue > 800){
				// 		newValue = 800;
				// 	}
					
				// 	//把新值给box1
				// 	box1.style.left = newValue + "px";
					
				// 	//当元素移动到800px时，使其停止动画
				// 	 if(newValue == 800){
				// 		 clearInterval(timer);
				// 	 }
					
				// },30)
				move(divbox1,800,10,"left");
				
			}
			but2.onclick = function(){
				// clearInterval(timer);
				// //开启一个定时器来实现动画效果
				// timer =  setInterval(function(){
					
				// 	//获取box1原来的left值
				// 	var oldvalue = parseInt(getStyle(box1,"left"));
				// 	// alert(getStyle(divbox1,"left"))
				// 	//修改
				// 	var newValue = oldvalue - 10 ;
					
				// 	if(newValue < 0){
				// 		newValue = 0;
				// 	}
					
				// 	//把新值给box1
				// 	box1.style.left = newValue + "px";
					
				// 	//当元素移动到800px时，使其停止动画
				// 	 if(newValue == 0){
				// 		 clearInterval(timer);
				// 	 }
					
				// },30)
				move(divbox1,0,10,"left");
				
			}
			but3.onclick = function(){
				move(divbox2,800,10,"top");
			}
			but4.onclick = function(){
				move(divbox2,0,10,"top")
			}
			//参数
			//	obj:要执行动画的对象
			//	target:执行动画的目标位置
			//	speed：移动的速度
			//	attr :要修改的动画样式
			// callback:回调函数
			function move(obj,target,speed,attr,callback){
				
				clearInterval(obj.timer);
				var current = parseInt(getStyle(obj,"left"));
				//判断speed的正负指
				//如果从0向800移动，则speed为正
				//如果从800向0移动，则speed为负
				if(current > target){
					speed = -speed;
				}
				//开启一个定时器来实现动画效果
				obj.timer =  setInterval(function(){
						
					//获取box1原来的left值
					var oldvalue = parseInt(getStyle(obj,attr));
					// alert(getStyle(divbox1,"left"))
					//修改
					var newValue = oldvalue + speed ;
					//如果是往左移，需要判断newvalue是否小于target
					//如果是往右移，需要判断newvalue是否大于target
					if(speed < 0 && newValue < target || speed > 0 && newValue > target){
						newValue = target;
					}
						
					//把新值给box1
					obj.style[attr] = newValue + "px";
						
					//当元素移动到800px时，使其停止动画
					 if(newValue == target){
						 clearInterval(obj.timer);
					 }
				},30)
					callback & callback();
				}
		</script>
	</body>
</html>
